<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-row :gutter="10" class="mb8">
        <el-col :span="4">
          <el-input
            v-model="queryParams.prCode"
            placeholder="请输入入库单编号"
            clearable
            @keyup.enter.native="handleQuery"
            style="width: 100%"
          />
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="queryParams.prName"
            placeholder="请输入入库单名称"
            clearable
            @keyup.enter.native="handleQuery"
            style="width: 100%"
          />
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="queryParams.prOrderCode"
            placeholder="请输入工单编号"
            clearable
            @keyup.enter.native="handleQuery"
            style="width: 100%"
          />
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="queryParams.prOrderName"
            placeholder="请输入工单名称"
            clearable
            @keyup.enter.native="handleQuery"
            style="width: 100%"
          />
        </el-col>
        <el-col :span="4">
          <el-input
            v-model="queryParams.prBatch"
            placeholder="请输入批次号"
            clearable
            @keyup.enter.native="handleQuery"
            style="width: 100%"
          />
        </el-col>
      </el-row>

      <el-row :gutter="10" class="mb8">
        <el-col :span="4">
          <el-select
            v-model="queryParams.wCode"
            placeholder="请选择仓库"
            clearable
            @visible-change="handleWarehouseFocus"
            style="width: 100%"
          >
            <el-option v-for="item in warehouseOptions" :key="item.wCode" :label="item.wName" :value="item.wCode" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="queryParams.prProductCode"
            placeholder="请选择产品"
            clearable
            @visible-change="handleProductFocus"
            style="width: 100%"
          >
            <el-option v-for="item in productOptions" :key="item.pdCode" :label="item.pdName" :value="item.pdCode" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-date-picker clearable
                          v-model="queryParams.prReceiptDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择入库时间"
                          style="width: 100%"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryParams.prStatus" placeholder="请选择状态" clearable style="width: 100%">
            <el-option key="0" label="未确认" value="0" />
            <el-option key="1" label="未入库" value="1" />
            <el-option key="2" label="已入库" value="2" />
            <el-option key="3" label="已完成" value="3" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['wm:inbound:product_receipt:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['wm:inbound:product_receipt:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['wm:inbound:product_receipt:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="product_receiptList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" fixed />
      <el-table-column label="入库单编号" align="center" prop="prCode" width="180" fixed>
        <template slot-scope="scope">
          <span v-if="scope.row.prStatus === '0'">{{scope.row.prCode}}</span>
          <span v-else @click="handleDetail(scope.row)" style="color: #00afff">
            {{scope.row.prCode}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="入库单名称" align="center" prop="prName" width="120" fixed />
      <el-table-column label="入库时间" align="center" prop="prReceiptDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.prReceiptDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工单编号" align="center" prop="prOrderCode" width="180" />
      <el-table-column label="工单名称" align="center" prop="prOrderName" width="120" />
      <el-table-column label="产品编号" align="center" prop="prProductCode" width="120" />
      <el-table-column label="产品名称" align="center" prop="prProductName" width="120" />
      <el-table-column label="规格型号" align="center" prop="prProductSpecType" width="120" />
      <el-table-column label="单位" align="center" prop="prProductUnitName" width="120" />
      <el-table-column label="批次号" align="center" prop="prBatch" width="120" />
      <el-table-column label="入库数量" align="center" prop="prReceiptNum" width="120" />
      <el-table-column label="仓库名称" align="center" prop="prWName" width="120" />
      <el-table-column label="库区名称" align="center" prop="prSaName" width="120" />
      <el-table-column label="库位名称" align="center" prop="prSlName" width="120" />
      <el-table-column label="状态" align="center" prop="prStatus" fixed="right" :formatter="handleStatus" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="180" >
        <template slot-scope="scope">
         <div v-if="scope.row.prStatus === '0'">
           <el-button
             size="mini"
             type="text"
             icon="el-icon-check"
             @click="handleConfirm(scope.row)"
             v-hasPermi="['wm:inbound:product_receipt:confirm']"
           >确认入库信息</el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['wm:inbound:product_receipt:remove']"
           >删除</el-button>
         </div>
          <div v-else-if="scope.row.prStatus === '1'">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-upload"
              @click="handleStorage(scope.row)"
              v-hasPermi="['wm:inbound:product_receipt:store']"
            >入库</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['wm:inbound:product_receipt:edit']"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['wm:inbound:product_receipt:remove']"
            >删除</el-button>
          </div>
          <div v-else-if="scope.row.prStatus === '2'">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-undo"
              @click="handleRecall(scope.row)"
              v-hasPermi="['wm:inbound:product_receipt:recall']"
            >撤回</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listProduct_receipt,
  delProduct_receipt,
  getPdCode, getWCode, storeProduct_receipt
} from '@/api/yyj/wm/inbound/product_receipt'
import { parseTime } from '@/utils/ruoyi'

export default {
  name: "Product_receipt",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品入库单表格数据
      product_receiptList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        prCode: null,
        prName: null,
        prReceiptDate: null,
        prOrderCode: null,
        prOrderName: null,
        prDesc: null,
        prProductCode: null,
        prBatch: null,
        prReceiptNum: null,
        prProductionDate: null,
        prExpirationDate: null,
        prProductName: null,
        prStoLocation: null,
        prStatus: null,
        pdCode: null,
        wCode: null
      },
      // 产品下拉框
      productOptions: [],
      // 产品是否被查询
      hasPdQueried: false,
      // 仓库下拉框
      warehouseOptions: [],
      // 仓库是否被查询
      hasWQueried: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    parseTime,
    // 重置查询参数
    resetQueryParams() {
      this.queryParams= {
          pageNum: 1,
          pageSize: 10,
          prCode: null,
          prName: null,
          prReceiptDate: null,
          prOrderCode: null,
          prOrderName: null,
          prDesc: null,
          prProductCode: null,
          prBatch: null,
          prReceiptNum: null,
          prProductionDate: null,
          prExpirationDate: null,
          prProductName: null,
          prStoLocation: null,
          prStatus: null,
          pdCode: null,
          wCode: null
      };
      this.resetForm("queryForm");
    },
    /** 查询产品入库单列表 */
    getList() {
      this.loading = true;
      listProduct_receipt(this.queryParams).then(response => {
        this.product_receiptList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.hasPdQueried = false;
      this.hasWQueried = false;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.hasPdQueried = false;
      this.hasWQueried = false;
      this.resetQueryParams();
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.prCode)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.hasWQueried = false;
      this.hasPdQueried = false;
      this.$router.push({
        path: '/warehouse/inbound/product_receipt/add'
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.hasPdQueried = false;
      this.hasWQueried = false;
      const prCode = row.prCode;
      this.$router.push({
        path: '/warehouse/inbound/product_receipt/edit',
        query: {
          prCode: prCode
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const prCodes = row.prCode || this.ids;
      this.$modal.confirm('是否确认删除产品入库单编号为"' + prCodes + '"的数据项？').then(function() {
        return delProduct_receipt(prCodes);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('yyj/wm/inbound/product_receipt/export', {
        ...this.queryParams
      }, `product_receipt_${new Date().getTime()}.xlsx`)
    },
    /** 产品名称焦点事件 */
    handleProductFocus(isVisible) {
      if (isVisible) {
        if (!this.hasPdQueried) {
          this.productOptions = [];
          this.getProductOptions();
          this.hasPdQueried = true;
        }
      }
    },
    /** 获取产品数据 */
    getProductOptions() {
      getPdCode('0').then(response => {
        this.productOptions = response.data
      })
    },
    /** 仓库名称焦点事件 */
    handleWarehouseFocus(isVisible) {
      if (isVisible) {
        if (!this.hasWQueried) {
          this.warehouseOptions = [];
          this.getWarehouseOptions();
          this.hasWQueried = true;
        }
      }
    },
    /** 获取仓库数据 */
    getWarehouseOptions() {
      getWCode().then(response => {
        this.warehouseOptions = response.data
      })
    },
    /** 状态处理 */
    handleStatus(cellValue) {
      const status = cellValue.prStatus;
      if (status === '0' || status === '1') {
        return '未入库'
      } else if (status === '2') {
        return '已入库'
      } else {
        return '未知'
      }
    },
    /** 确认入库信息按钮操作 */
    handleConfirm(row) {
      const prCode = row.prCode;
      this.hasWQueried = false;
      this.hasPdQueried = false;
      this.$router.push({
        path: '/warehouse/inbound/product_receipt/confirm',
        query: {
          prCode: prCode
        },
      });
    },
    /** 入库按钮操作 */
    handleStorage(row) {
      const prCode = row.prCode;
      const prStatus = 2;

      const prStoLocation = row.prStoLocation;
      const prProductCode = row.prProductCode;
      const prReceiptNum = row.prReceiptNum;
      const prBatch = row.prBatch;
      const prProductionDate = row.prProductionDate;
      const prExpirationDate = row.prExpirationDate;

      const prOrderCode = row.prOrderCode;

      this.$modal.confirm('是否确认入库产品入库单编号为"' + prCode + '"的数据项？').then(function() {
        return storeProduct_receipt({
          prCode,
          prStatus,
          prStoLocation,
          prProductCode,
          prReceiptNum,
          prBatch,
          prProductionDate,
          prExpirationDate,
          prOrderCode,
        });
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("入库成功");
      }).catch(() => {});
    },
    /** 撤回按钮操作 */
    handleRecall(row) {
      const prCode = row.prCode;
      const prStatus = 1;

      const prProductCode = row.prProductCode;
      const prReceiptNum = row.prReceiptNum;
      const prBatch = row.prBatch;

      const prOrderCode = row.prOrderCode;

      this.$modal.confirm('是否确认撤回产品入库单编号为"' + prCode + '"的数据项？').then(function() {
        return storeProduct_receipt({
          prCode,
          prStatus,
          prProductCode,
          prReceiptNum,
          prBatch,
          prOrderCode,
        })
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("撤回成功");
      }).catch(() => {});
    },
    // 查看入库单详情
    handleDetail(row) {
      const prCode = row.prCode;
      this.$router.push({
        path: '/warehouse/inbound/product_receipt/detail',
        query: {
          prCode: prCode
        }
      })
    }
  }
};
</script>
